<template>
  <div class="dashboard-container">
    <div class="dashboard-text">服务列表</div>
    <el-card>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        height="75vh"
      >
        <el-table-column
          label="序号"
          type="index"
          width="60"
        />
        <el-table-column
          prop="serviceID"
          label="ID"
          width="80"
        />
        <el-table-column
          prop="servicename"
          label="服务名称"
          width="120"
        />
        <el-table-column
          prop="serviceversion"
          label="服务版本"
          min-width="120"
        />
        <el-table-column
          prop="createddate"
          label="创建时间"
          min-width="120"
        />
        <el-table-column
          prop="receiveparaname"
          label="接入参数"
          min-width="120"
        />
        <el-table-column
          prop="outparaname"
          label="输出参数"
          min-width="120"
        />
        <el-table-column
          prop="pathname"
          label="开放PATH"
          min-width="120"
        />
        <el-table-column
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-check" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList, deleteService } from '@/api/user'

export default {
  name: 'Dashboard',
  components: {
  },
  data() {
    return {
      tableData: [{
        serviceID: '00001',
        servicename: '服务名称1',
        serviceversion: '服务版本1',
        createddate: '2022-04-02',
        receiveparaname: '接入参数1',
        outparaname: '输出参数1',
        pathname: '开放PATH1'
      }, {
        serviceID: '00002',
        servicename: '服务名称2',
        serviceversion: '服务版本2',
        createddate: '2022-04-02',
        receiveparaname: '接入参数2',
        outparaname: '输出参数2',
        pathname: '开放PATH2'
      }, {
        serviceID: '00003',
        servicename: '服务名称3',
        serviceversion: '服务版本3',
        createddate: '2022-04-02',
        receiveparaname: '接入参数3',
        outparaname: '输出参数3',
        pathname: '开放PATH3'
      }, {
        serviceID: '00004',
        servicename: '服务名称4',
        serviceversion: '服务版本4',
        createddate: '2022-04-02',
        receiveparaname: '接入参数4',
        outparaname: '输出参数4',
        pathname: '开放PATH4'
      }, {
        serviceID: '00005',
        servicename: '服务名称5',
        serviceversion: '服务版本5',
        createddate: '2022-04-02',
        receiveparaname: '接入参数5',
        outparaname: '输出参数5',
        pathname: '开放PATH5'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    // getInfo()
    this.getList()
  },

  methods: {
    handleClick(row) {
      console.log(row)
    },
    async del(row) {
      console.log(row)
      const confirmResult = await this.$confirm('确定要删除吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .catch((err) => {
          console.log(err)
          return err
        })
      if (confirmResult !== 'confirm') {
        // 证明用户取消了删除，给用户提示信息
        return this.$message.info('已经取消删除')
      }
      this.deleteService(row.serviceID)
    },
    async getList() {
      const res = await getList()
      console.log(res)
    },
    async deleteService(id) {
      const res = await deleteService({ serviceId: id })
      if (res !== 1) {
        this.$message.error('删除失败')
        return
      }
      this.$message.success('删除陈成功')
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 26px;
    line-height: 46px;
  }
}
</style>
